<template>
  <div class="container">


    <!--    <div style="height: 104px;width: 134px;position: fixed;top: -25px;left: -29px;">-->
    <!--&lt;!&ndash;        <img src="http://localhost:9000/static/logo.png" style="width: 100%;height: 100%"/>&ndash;&gt;-->
    <!--    </div>-->
    <!-- Top Menu start -->
    <div style="width: 100%;height: 60px;" v-if="$route.meta.showMenu" class="menu_box">
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
          text-color="black"
          active-text-color="black"
          background-color="rgba(0,0,0,0)"
      >
        <div class="flex-grow" >
          <div style="width: 30px;height: 58px">
            <img src="http://localhost:9000/static/logo.png" style="width: 90px;height: 100%;"/>
          </div>
        </div>
        <div index="inference">
          <el-badge is-dot class="item" style="margin-top: 10px;">
            <el-button type="primary" :icon="Bell" @click="getMessage"></el-button>
          </el-badge>
        </div>
        <el-menu-item index="inference">影像推理</el-menu-item>
        <el-sub-menu index="2">
          <template #title></template>
          <el-menu-item index="datasets">个人中心</el-menu-item>
          <el-menu-item index="2-2">退出登录</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <!-- Top Menu end -->

    <div class="personal" v-if="$route.meta.showPersonal">
      <div class="content">
        <div class="p-c-info-content">
          <div class="p-c-info-portrait-wrap is-silver">
            <div class="avatar" style="width: 100%;height: 100%">
              <div class="circle">
                <img src="http://localhost:9000/static/user.jpg" style="width: 100%;height: 100%;border-radius: 50%;"/>
              </div>
            </div>
          </div>
          <div class="p-c-info-rt" style="width: 145px;">
            <div class="p-c-info-name" style="display: flex">测试用户</div>
            <div class="p-c-info-followCount" style="display: flex">123123</div>
            <div class="p-c-info-followCount" style="display: flex">暂未完善个人简介</div>
          </div>
          <div class="p-c-info-rt" style="margin-left: 330px;">
            <div class="p-c-info-name">200</div>
            <div class="p-c-info-followCount">配额</div>
          </div>
          <div class="p-c-info-rt">
            <div class="p-c-info-name">20</div>
            <div class="p-c-info-followCount">任务总数</div>
          </div>
          <div class="p-c-info-rt">
            <div class="p-c-info-name">2</div>
            <div class="p-c-info-followCount">模型总数</div>
          </div>
        </div>
        <div class="usercenter-header-ma"></div>
      </div>
    </div>

    <div class="left_oval"></div>
    <div class="mid_oval"></div>
    <div class="mid_right_oval"></div>

    <!-- sidebar start -->
    <div class="sidebar" v-if="$route.meta.showNavbar">
      <el-row class="tac">
        <el-col :span="12">
          <el-menu
              default-active="$route.path"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              @select="handleSelect"
              background-color="rgba(0,0,0,0)"
          >
            <el-menu-item index="1" style="padding-left: 20px !important;" class="el-menu-item">
              <el-icon><icon-menu /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-sub-menu index="2" class="el-sub-menu">
              <template #title>
                <el-icon><location /></el-icon>
                <span>文件管理</span>
              </template>
              <el-menu-item index="datasets">影像管理</el-menu-item>
              <el-menu-item index="labelsets">标签管理</el-menu-item>
              <el-menu-item index="model">模型管理</el-menu-item>
              <el-menu-item index="script">脚本管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3"  class="el-sub-menu">
              <template #title>
                <el-icon><location /></el-icon>
                <span>任务中心</span>
              </template>
              <el-menu-item index="task">我的任务</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4"  class="el-sub-menu">
              <template #title>
                <el-icon><location /></el-icon>
                <span>模型中心</span>
              </template>
              <el-menu-item index="ModelCenter">我的模型</el-menu-item>
              <el-menu-item index="3-1">创建模型</el-menu-item>
              <el-menu-item index="3-2">训练模型</el-menu-item>
              <el-menu-item index="3-3">校验模型</el-menu-item>
              <el-menu-item index="3-4">发布模型</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <!-- sidebar end -->

    <!-- main start -->
    <div class="app_main" v-if="$route.meta.showContent">
      <router-view></router-view>
    </div>
    <!-- main end -->

    <!-- index_main start -->
    <div class="index_main" v-if="$route.meta.showIndex">
      <router-view style="margin-left: -72px"></router-view>
    </div>
    <!-- index_main end -->

    <!-- index_main start -->
    <div class="index_main" v-if="$route.meta.showImgIndex">
      <router-view></router-view>
    </div>
    <!-- index_main end -->
  </div>
</template>

<script>
// import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'
import router from "@/router";
import {ref} from "vue";
import {Avatar, UserFilled, Bell} from "@element-plus/icons-vue";
import { ElNotification } from 'element-plus'
import Images from "@/components/Images";

export default {
  name: 'App',
  components: {Images},
  setup(){
    const handleOpen = function(key, keyPath) {
      console.log(key, keyPath)
    }

    const handleClose = function(key, keyPath) {
      console.log(key, keyPath)
    }

    const activeIndex = ref("index")

    const handleSelect = (key, keyPath) => {
      console.log(key)
      activeIndex.value = 'key'
      router.push({ name: key})
    }

    const getMessage = () => {
      ElNotification({
        title: '任务运行完成!',
        message: '任务运行完成',
        type: 'success',
      })
    }

    return{
      handleClose,
      handleOpen,
      handleSelect,
      activeIndex,
      Avatar,
      UserFilled,
      Bell,
      getMessage
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: white;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}
body{
  /*background-color: #f2f4fc;*/
  background-color: rgb(242 244 252);
}
.container {
  /*display: flex;*/
  height: 100vh;
  width: 100%;
}
.sidebar {
  /*flex-basis: 17%;*/
  background-color: white;
  float: left;
  width: 290px;
  height: 100%;
  margin-left:418.6px;
  margin-top: 22px
}
.app_main {
  /*flex-basis: 80%;*/
  float: left;
  width: 870px;
  height: 100%;
  position: relative;
}
.index_main{
  background-color: #f2f4fc;
  /*float: left;*/
  width: 100%;
  height: 100%;
}
.tac{
  width: 60%;
  display: block !important;
  /*margin-left: 18%;*/
  margin-top: 20px;
  margin-left: 25%;
}
.el-col-12{
  max-width: 100% !important;
}
.flex-grow {
  flex-grow: 1;
}
.el-row{
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
  width: 290px;
  margin-left: 0px;
  background-color: rgba(0,0,0,0) !important;

}
.left_oval{
  left: 1439px;
  width: 800px;
  height: 800px;
  opacity: 1;
  background: linear-gradient(
      166.79deg
      , rgba(235, 235, 235, 1) 0%, rgba(96, 151, 240, 1) 0%, rgba(255, 255, 255, 1) 48%, rgba(102, 205, 242, 1) 100%);
  border-radius: 100%;
  position: absolute;
  top:  -400px;
  position: fixed;
  z-index: -1;
}
.mid_oval,.mid_right_oval{
  left: 141px;
  width: 50px;
  height: 50px;
  opacity: 1;
  background: #a3daf7;
  border-radius:100% ;
  position: absolute;
  top: 200px;
  position: fixed;
  z-index: -1;
}
.mid_right_oval{
  left:210px;
  width: 20px;
  height: 20px;
  background-color: #a1c8f7;
}
.personal{
  width: 1068px;
  height: 181px;
  background-color: white;
  margin: 20px auto auto;
  border-radius: 4px;
  border-radius: 10px 10px 10px 10px;
}
.personal .content{
  box-sizing: border-box;
  height: 160px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 23px 40px;
  margin-bottom: 20px;
  border-radius: 4px;
  font-size: 14px;
  align-items: center;
}
.p-c-info-content {
  display: flex;
  align-items: center;
}
.usercenter-header-ma {
  border: 1px dotted #eee;
  display: flex;
  padding: 14px 0;
}
.p-c-info-portrait-wrap {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 100px;
  border: 3px solid;
  border-radius: 50%;
  margin-right: 25px;
  position: relative;
}
.p-c-info-name {
  align-items: center;
  font-size: 24px;
  font-weight: 500;
  color: #000;
  height: 32px;
  margin-bottom: 8px;
}
.p-c-info-desc, .p-c-info-extra, .p-c-info-followCount {
  align-items: center;
  color: #666;
  line-height: 22px;
}
.el-sub-menu .el-menu {
  border: none;
  margin-left: 30px;
}
.p-c-info-rt{
  width: 110px;
  text-align: center;
}
.avatar{
  background-image: linear-gradient(#aaf0d8, #2ED);
  padding: 3px;
  box-sizing: border-box;
  border-radius: 50%;
}
.circle{
  width:100%;
  height:100%;
  background:#fff;
  border-radius:50%;
}
</style>
